<template>
  <div class="achievement" v-cloak>
    <div class="bg_color"></div>
    <div style="height: 4px;position: absolute;z-index: 2222; width: 100%; top: 46px;background: #f0f0f0"></div>
    <div style="height: 50px;"></div>
    <div class="about-us" v-show="show">
      <div class="content">
        <div class="row">
          <label>姓名：</label>
          <input type="text" placeholder="请填写姓名" v-model="name" v-on:input="nameAdress">
        </div>
        <div class="row">
          <label>手机：</label>
          <input type="number" placeholder="请填写手机号" v-model="mobile" v-on:input="mobileAdress">
        </div>
        <div class="row" @click="selectAddress">
          <label>所在地区：</label>
          <input type="text" placeholder="请选择地区" v-model="allcity" readonly>
          <img class="arrow" src="../assets/image/fuxq_btn_05.png">
        </div>
        <div class="row">
          <label>详细地址：</label>
          <input type="text" placeholder="请填写详细地址" v-model="address">
        </div>
        <div class="row">
          <div class="checkbox">
            <input id="dft" type="checkbox">
            <label for="dft">设为默认</label>
          </div>
        </div>
        <div class="saveBtn" @click="submit">保存</div>
      </div>
    </div>
  </div>
</template>
<script>
  let Jquery = require('Jquery')
  export default {
    name: 'addJoin',
    data () {
      return {
        show: true,
        list: [1, 2, 3],
        name: '',
        mobile: '',
        allcity: '',
        province: '',
        city: '',
        county: '',
        address: '',
        default: '',
        member: '',
        url: 'User/setUserAddress'
      }
    },
    methods: {
      nameAdress: function () {
        this.setmode('addressname', this.name)
      },
      mobileAdress: function () {
        this.setmode('addressmobile', this.mobile)
      },
      is_mobile: function (mobile) {
        return /^1[34578]\d{9}$/.test(mobile)
      },
      setmode: function (name, content) {
        let mode = this.$chaos.config('mode')
        if (mode === 'website') {
          sessionStorage[name] = JSON.stringify(content)
        } else {
          localStorage[name] = JSON.stringify(content)
        }
      },
      submit: function () {
        if (!this.name) {
          this.$vux.toast.show({
            text: '姓名不能为空',
            type: 'text',
            width: '180px',
            position: 'bottom'
          })
          return false
        }
        if (!this.mobile) {
          this.$vux.toast.show({
            text: '手机号码不能为空',
            type: 'text',
            width: '180px',
            position: 'bottom'
          })
          return false
        }
        if (!this.is_mobile(this.mobile)) {
          this.$vux.toast.show({
            text: '请输入正确的手机号',
            type: 'text',
            width: '180px',
            position: 'bottom'
          })
          return false
        }
        if (!this.allcity) {
          this.$vux.toast.show({
            text: '请选择地区',
            type: 'text',
            width: '180px',
            position: 'bottom'
          })
          return false
        }
        if (!this.address) {
          this.$vux.toast.show({
            text: '详细地址不能为空',
            type: 'text',
            width: '180px',
            position: 'bottom'
          })
          return false
        }
        if (Jquery('#dft').is(':checked')) {
          this.default = '是'
        } else {
          this.default = '否'
        }
        let thisObj = this
        let data = {}
        if (this.member === 'no') {
          data = {
            user_name: thisObj.name,
            mobile: thisObj.mobile,
            address: thisObj.allcity,
            province: thisObj.province,
            city: thisObj.city,
            county: thisObj.county,
            address_detail: thisObj.address,
            type: '服务地址',
            default: thisObj.default
          }
        } else {
          data = {
            name: thisObj.name,
            mobile: thisObj.mobile,
            address: thisObj.allcity,
            address_detail: thisObj.address
          }
        }
        thisObj.$chaos.ajax({
          data: data,
          slient: true,
          userinfo: true,
          url: thisObj.url,
          callback: function (type, res) {
            if (res.status === 'SUCCESS') {
              thisObj.$vux.toast.show({
                text: '添加成功',
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
              setTimeout(function () {
                window.history.go(-1)
              }, 300)
            } else {
              thisObj.$vux.toast.show({
                text: res.result.msg,
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
            }
          }
        })
      },
      getmode: function (content) {
        let mode = this.$chaos.config('mode')
        if (mode === 'website' && sessionStorage[content]) {
          return JSON.parse(sessionStorage[content])
        } else if (mode === 'client' && localStorage[content]) {
          let content = JSON.parse(localStorage[content])
          if (content.expire_time * 1000 < new Date().getTime()) {
            localStorage[content] = null
            return false
          }
          return content
        } else {
          return false
        }
      },
      selectAddress: function () {
        this.setmode('mangeradd', 'one')
        window.location.href = '#/Located'
      },
      verify: function () {
        this.$chaos.setTitle('填写地址')
        this.setmode('need-refresh', true)
        this.$store.commit('headerShow', true)
        this.$store.commit('title', '填写地址')
        this.$store.commit('footerShow', false)
        this.member = this.$chaos.getQueryString('member')
        if (this.member === 'member') {
          this.url = 'User/saveMemberServiceAddress'
        }
        if (this.getmode('manger') === 'one') {
          this.setmode('usprovince', '')
          this.setmode('uscity', '')
          this.setmode('uscounty', '')
          this.setmode('addressname', '')
          this.setmode('addressmobile', '')
        } else {
          if (this.getmode('mangeradd') !== 'one') {
            this.setmode('usprovince', '')
            this.setmode('uscity', '')
            this.setmode('uscounty', '')
            this.setmode('addressname', '')
            this.setmode('addressmobile', '')
          } else {
            if (this.getmode('usprovince')) {
              this.allcity = this.getmode('usprovince') + this.getmode('uscity') + this.getmode('uscounty')
              this.province = this.getmode('usprovince')
              this.city = this.getmode('uscity')
              this.county = this.getmode('uscounty')
            }
            if (this.getmode('addressname')) {
              this.name = this.getmode('addressname')
              this.mobile = this.getmode('addressmobile')
            }
          }
        }
      }
    },
    created: function () {
      if (this.getmode('need-address')) {
        window.location.reload()
        this.setmode('need-address', false)
      }
      this.verify()
    },
    mounted: function () {
      window.scrollTo(0, 2000)
    },
    watch: {
      '$route': 'verify'
    }
  }
</script>
<style scoped>
  [v-cloak] {
    display: block;
  }
  .content{
    padding-bottom: 45px;
  }
  .content .row{
    background: #fff;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #eee;
    position: relative
  }
  .content .row label{
    margin-left: 15px
  }
  .content .row > input{
    height: 40px;
    line-height: 40px;
    width: calc(100% - 120px);
    overflow: hidden;
  }
  .content .row .arrow{
    float: right;
    margin-right: 15px;
    width: 8px;
    height: 14px;
    margin-top: 13px;
  }
  .content .row .clear{
    position: absolute;
    color: #999;
    right: 15px;
    top: 0
  }
  .content .checkbox{
    position: absolute;
    height: 40px;
    line-height: 40px;
    left: 15px
  }
  .content .checkbox label{
    margin-left: 25px
  }
  .content .checkbox > input[type="checkbox"]{
    position: absolute;
    left: 0;
    top: 11px;
    outline: none;
    -webkit-appearance: none;
    border: 1px solid #ccc;
    border-radius: 3px;
    height: 16px;
    width: 16px;
    margin-right: 5px
  }
  .content .checkbox > input[type="checkbox"]:checked{
    background: url(../assets/image/fuxq_btn_02.png);
    background-size: 100% 100%;
    width:16px;
    height:16px;
    border:0;
    background-size:100% 100%;
  }
  input{
    outline: none;
    border:0px;
    margin:0px;
    padding: 0px;
  }
  .saveBtn{
    width: calc(100% - 30px);
    margin: 0 auto;
    background-color: #ffa128;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 6px;
    color: #fff;
    margin-top: 15px;
    font-size: 16px;
  }
</style>
